<template>
    <div>
        <c-title :text="diy_name"></c-title>
        <van-tabs v-model="active" line-width=".9375rem" line-height=".125rem" @click="submit_handle">
            <template v-for="(item, index) in tab_list">
                <van-tab v-if="item.show" :title="item.title" :name="item.title"></van-tab>
            </template>
        </van-tabs>
        <div class="bg-linear">
            <div class="head-top">
                <div class="flex-a-c">
                    <img :src="avatar_image" />
                    <div class="nick-name">{{ nick_name }}</div>
                </div>
                <div class="btn" v-if="active == '招商员'" @click="link('finger_shopping_recruit_merchant')">招募商家</div>
                <div class="btn flex-a-c" v-else-if="(active == '区县代理' || active == '省级代理') && agent_list.length > 1"
                    style="padding-left: .625rem;" @click.stop="change_area"><i class="iconfont icon-a-zhuanranggai"></i>切换区域
                </div>
            </div>
            <div class="head-center">
                <template v-if="active !== '推荐人'">
                    <template v-if="active=='省级代理'">
                        <div class="flex-a-c">
                            <span>代理区域：{{ area }}</span>
                            <span class="merchant" style="margin-right: 0.4688rem;">商家数：{{ store_count }}个</span>
                            <span>分红比例：{{ ratio }}%</span>
                        </div>
                    </template>
                    <template v-else>
                        <div class="flex-a-c">
                        <span>{{ active !== '招商员' ? '代理区域' : '所属区域' }}：{{ area }}</span>
                        <span class="merchant">商家数：{{ store_count }}个</span>
                    </div>
                    <div class="proportion">分红比例：{{ ratio }}%</div>
                    </template>
       

                </template>
                <template v-else>
                    <div class="flex-a-c" style="flex-wrap: wrap;">
                        <span class="no-wrap">省级代理：{{ recommend_obj.province }}人</span>
                        <span class="merchant no-wrap">分红比例：{{ recommend_obj.set && recommend_obj.set.district_percent
                        }}%</span>
                        <span class="no-wrap merchant-right">区县代理：{{ recommend_obj.district }}人</span>
                        <span style="margin-top: .5rem;" class="no-wrap">分红比例：{{ recommend_obj.set &&
                            recommend_obj.set.province_percent }}%</span>
                    </div>
                </template>
            </div>
            <div class="head-bottom">
                <div class="flex-column ">
                    <span class="price">¥{{ total_reward }}</span>
                    <span class="tips">累计获得(元)</span>
                </div>
                <div class="flex-column ">
                    <span class="price">¥{{ not_settle_reward }}</span>
                    <span class="tips">未结算金额(元)</span>
                </div>
                <div class="flex-column ">
                    <span class="price">¥{{ settled_reward }}</span>
                    <span class="tips">已结算金额(元)</span>
                </div>
            </div>
        </div>

        <div class="second-tabs">
            <template v-if="active == '招商员'">
                <Merchants :list="merchants_list" @get_list="get_list">
                </Merchants>
            </template>
            <template v-else-if="active == '区县代理' || active == '省级代理'">
                <county_agent ref="county_agent" :active="active" :list="list" @get_list="get_list" :agent_id="agent_id"
                    :left_employee_count="agent_info.left_employee_count"></county_agent>
            </template>
            <template v-else-if="active == '推荐人'">
                <recommend :list="recommend_list" @get_list="get_list">
                </recommend>
            </template>
        </div>
        <van-popup round v-model="show" position="bottom" closeable>
            <div class="popup-title">
                代理区域
            </div>
            <van-cell-group>
                <van-cell v-for="(item, index) in agent_list" :key="index" @click="handle_click(item, index)">
                    <template #title>
                        <div class="t-l">{{ item.area }}</div>
                    </template>
                    <template #right-icon>
                        <i v-if="current_index == index" class="iconfont icon-all_select_choose" style="color:#F15353">
                        </i>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-popup>
    </div>
</template>

<script>
import County_agent from "./components/county_agent.vue";
import Merchants from "./components/merchants.vue";
import recommend from "./components/recommend.vue";
import { scrollMixin } from '@/utils/mixin.js';


export default {
    mixins: [scrollMixin],
    data() {
        return {
            diy_name:"",
            recommend_list: [],
            merchants_list: [],
            form: {},
            month_data: [],
            current_index: 0,
            isLoadMore: true,
            avatar_image: '',
            active: '',
            tab_list: [
                { title: "招商员", show: 0 },
                { title: "区县代理", show: 0 },
                { title: "省级代理", show: 0 },
                { title: "推荐人", show: 0 }
            ],
            show: false,
            agent_list: [],
            area_id: null,//区域代理id
            current_page: 1,
            last_page: 1,
            agent_info: {},
            nick_name: "",
            store_count: 0,
            area: "",
            ratio: "",
            list: [],
            agent_index: 0,
            agent_list_status: '',
            earnings_status: '',
            not_settle_reward: "",
            settled_reward: "",
            total_reward: "",
            agent_id: "",
            recommend_obj: {},
            left_store_count: null,
            is_settle: null,
        };
    },
    mounted() {
        this.list = [];
        this.getData()
    },

    methods: {
       
        getMoreData() {
            this.isLoadMore = false;  // 防止多次请求分页数据
            if (this.current_page >= this.last_page) {
                return;
            } else {
                let page = this.current_page + 1;
                if ((this.active == '区县代理' || this.active == '省级代理')&&this.agent_index!==2) {
                    this.get_agent_list(this.agent_id, page);
                } else if (this.active == '推荐人'&&this.agent_index!==0) {
                        this.get_agent_list('', page)
                } else {
                    if (this.agent_index == 0) {
                        this.get_merchant_list(this.merchant_id, page);
                    }

                }

            }
        },
        submit_handle() {
            this.list = [];
            this.current_page = 1;
            this.last_page = 1;
            this.agent_index = 0;
            if (this.active == '区县代理' || this.active == '省级代理') {
                this.area = '';
                this.store_count = '';
                this.ratio = '';
                this.getAgentList();
            } else if (this.active == '推荐人') {
                this.getReferee()
            } else {
                this.get_merchant_info()
            }
        },
        getReferee() {
            $http.post('plugin.zhixianggou.api.referee.index', '', '.').then(res => {
                if (res.result) {
                    this.recommend_obj = res.data;
                    this.total_reward = res.data.statistics.total_reward || 0;
                    this.not_settle_reward = res.data.statistics.not_settle || 0;
                    this.settled_reward = res.data.statistics.has_settle || 0;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        getAgentList() {
            $http.post('plugin.zhixianggou.api.agent.list', { level: this.active == '区县代理' ? 3 : 1 }, '.').then(res => {
                if (res.result) {
                    this.agent_list = res.data;
                    this.agent_id = res.data[0].id;
                    this.get_agent_info(res.data[0].id);
                    this.get_agent_list(res.data[0].id);
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        get_list(data) {
            this.list = [];
            this.merchants_list = [];
            console.log(data, 'data===');
            this.agent_index = data.index;
            this.form = { ...data };
            if(this.active=='招商员'&&data.index==0){
                this.get_merchant_list(this.merchant_id)
            }else{
                this.get_agent_list(this.agent_id);
            }
        },
        get_agent_list(id, page = 1) {
            let json = { page }
            let url = 'plugin.zhixianggou.api.agent.merchant-list';
            if (this.active == '推荐人') {
                url = 'plugin.zhixianggou.api.referee.agent-list';
            } else {
                if (this.agent_index == 1) {
                    json = { ...this.form, page };
                    json.agent_id = id || this.agent_id;
                    delete json.index;
                    url = 'plugin.zhixianggou.api.agent.store-list';
                } else if (this.active == '省级代理') {
                    url = 'plugin.zhixianggou.api.agent.child-agent-list';
                }
                json.agent_id = id;
            }
            $http.post(url, json, '.').then(res => {
                if (res.data) {
                    if (this.agent_index == 2) {
                        if (this.active == '推荐人') {
                            this.recommend_list = res.data.data;
                        } else {
                            this.list = res.data.data;
                        }
                    } else {
                        if (this.active == '推荐人') {
                            this.recommend_list = page == 1 ? res.data.data : this.recommend_list.concat(res.data.data);
                        } else {
                            this.list = page == 1 ? res.data.data : this.list.concat(res.data.data);
                        }
                    }
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                }
            })
        },
        get_agent_info(agent_id) {
            $http.post('plugin.zhixianggou.api.agent.index', { agent_id }, '.').then(res => {
                if (res.result) {
                    this.agent_info = res.data;
                    this.avatar_image = res.data.has_one_member.avatar_image;
                    this.nick_name = res.data.has_one_member.nickname;
                    this.area = res.data.area;
                    this.store_count = res.data.store_count;
                    this.ratio = res.data.ratio;
                    this.total_reward = res.data.total_reward;
                    this.settled_reward = res.data.settled_reward;
                    this.not_settle_reward = res.data.not_settle_reward;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        get_merchant_info() {
            $http.post('plugin.zhixianggou.api.merchant.index').then(res => {
                if (res.result) {
                    let data = res.data;
                    this.total_reward = data.statistics.total_reward || 0;
                    this.not_settle_reward = data.statistics.not_settle || 0;
                    this.settled_reward = data.statistics.has_settle || 0;
                    this.avatar_image = data.has_one_member.avatar_image;
                    this.nick_name = data.has_one_member.nickname;
                    this.area = data.has_one_agent.area;
                    this.ratio = data.percent;
                    this.left_store_count = data.left_store_count;
                    this.store_count = data.has_many_store_count;
                    this.merchant_id = data.id;
                    this.get_merchant_list(data.id);

                }
            })
        },
        get_merchant_list(merchant_id, page = 1) {
            $http.post('plugin.zhixianggou.api.merchant.store-list', { merchant_id, page,statistics:['day','week','month'] }, '.').then(res => {
                if (res.data) {
                    console.log(this.agent_index, '===', this.active, '=====');
                        if (this.active == '招商员') {
                            this.merchants_list = res.data.data;
                    } else {
                            this.merchants_list = page == 1 ? res.data.data : this.merchants_list.concat(res.data.data);
                    }
                    this.current_page = res.data.current_page;
                    this.last_page = res.data.last_page;
                }
            })
        },
        getData() {
            $http.post("plugin.zhixianggou.api.index.index").then(res => {
                if (res.result) {
                    let { merchant, districtAgent, provinceAgent, refer ,diy_name} = res.data;
                    this.diy_name = diy_name;
                    this.fun.setWXTitle(diy_name);
                    console.log(merchant, 'merchant==');
                    districtAgent == 1 && (this.tab_list[1].show = 1);
                    provinceAgent == 1 && (this.tab_list[2].show = 1);
                    refer == 1 && (this.tab_list[3].show = 1);
                    console.log(this.tab_list, 'tab_list==');
                    if (merchant) {
                        this.tab_list[0].show = 1;
                        this.active = '招商员';
                        this.get_merchant_info();
                    }
                    if (districtAgent) {
                        this.tab_list[1].show = 1;
                        (this.tab_list[0].show == 0) && (this.active = '区县代理');
                        merchant == 0 && this.getAgentList();
                    }
                    if (provinceAgent) {
                        this.tab_list[2].show = 1;
                        // this.active = '省级代理'
                    }
                    if (refer) {
                        this.tab_list[3].show = 1;
                        // this.active = '推荐人';
                    }

                }
            })
        },
        handle_click(item, index) {
            this.current_index = index;
            this.agent_id = item.id;
            this.agent_index = 0;
            this.list = [];
            this.$refs['county_agent'].active1 = 0;
            this.get_agent_info(item.id);
            this.get_agent_list(item.id);
            this.show = false;
        },
        change_area() {
            this.show = true;
        },
        link(url) {
            if (url == 'finger_shopping_recruit_merchant' && this.left_store_count == 0) {
                this.$toast('您已招满商家！');
                return
            }
            this.$router.push(this.fun.getUrl(url))
        }
    },
    components: { recommend, Merchants, County_agent },
};  
</script>

<style scoped lang='scss'>
::v-deep .van-tabs__line {
    bottom: 24px;
    background-color: var(--themeBaseColor);
}

.icon-all_select_choose {
    color: var(--themeBaseColor) !important;
}

::v-deep .van-tab--active {
    color: var(--themeBaseColor);
}

.no-wrap {
    text-wrap: nowrap;
}

.second-tabs ::v-deep .van-tabs__nav {
    background-color: transparent;
}

.popup-title {
    font-weight: 500;
    font-size: .9375rem;
    color: #00001C;
    padding-top: 1.5rem;
    text-align: center;
    padding-bottom: .75rem;
}

.second-tabs ::v-deep .van-tabs__line {
    bottom: 24px;
}

.icon-a-zhuanranggai {
    color: var(--themeBaseColor);
    margin-right: .3125rem;
    font-size: .625rem;
}



.bg-linear {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 13.8438rem;
        background: linear-gradient(180deg, var(--themeBaseColor) 55%, #F5F5F5 100%);
        border-radius: 0rem 0rem 0rem 0rem;
        z-index: -2;
    }
}

.head-bottom {
    background: #FFFFFF;
    border-radius: .5rem .5rem .5rem .5rem;
    padding: 1.1875rem 0 1.0313rem;
    display: flex;
    align-items: center;
    margin: .625rem .75rem;
    line-height: 1;
    justify-content: space-around;

}

.price {
    font-size: .9375rem;
    line-height: 1;
    color: #00001C;
    font-weight: bold;
}

.tips {
    font-size: .75rem;
    color: #6E6E79;
    line-height: 1;
    margin-top: .4375rem;
}

.head-center {
    position: relative;
    border-radius: .625rem .625rem .625rem .625rem;
    overflow: hidden;
    padding: .7813rem .75rem;
    font-weight: 400;
    font-size: .75rem;
    margin: 0 .75rem;
    color: #FFFFFF;
    line-height: 1;
    text-align: left;

    .merchant-right {
        margin-left: .4688rem;
        padding-left: .4688rem;
        padding-right: .4688rem;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            right: 0;
            top: .125rem;
            width: 1px;
            height: .5625rem;
            background-color: #fff;
        }
    }

    .merchant {
        margin-left: .4688rem;
        padding-left: .4688rem;
        padding-right: .4688rem;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: .125rem;
            width: 1px;
            height: .5625rem;
            background-color: #fff;
        }

        &::before {
            content: "";
            position: absolute;
            right: 0;
            top: .125rem;
            width: 1px;
            height: .5625rem;
            background-color: #fff;
        }
    }

    &::after {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        content: "";
        background: #000000;
        opacity: 0.1;
        z-index: -1;
    }

    .proportion {
        margin-top: .5rem;
    }
}

.head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem .75rem .9375rem 1.0625rem;

    .nick-name {
        font-weight: bold;
        font-size: 1rem;
        color: #FFFFFF;
        line-height: 1;
        margin-left: .5313rem;

    }

    img {
        margin: 0;
        width: 3.4375rem;
        height: 3.4375rem;
        border-radius: 100%;
    }

    .btn {
        padding: 0 .9375rem;
        height: 2rem;
        line-height: 2rem;
        font-weight: 500;
        font-size: .9375rem;
        color: var(--themeBaseColor);
        text-align: center;
        background: #FFFFFF;
        border-radius: 1.0313rem 1.0313rem 1.0313rem 1.0313rem;
        cursor: pointer;
    }
}
</style>